<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            Fiat Lux Mobile
        </title>
        <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
        <script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
        <script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
        <!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
             To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
        <script src="phonegap.js" type="text/javascript"></script>
        <!-- The Javascript for Fiat Lux-specific functions. -->
		<script type="text/javascript" charset="utf-8">
			// Wait for PhoneGap to load
			//
			function init() {
				// do something
			}
		
			// PhoneGap is ready
			//
			function onDeviceReady() {
				// do something
			}
		
			// alert dialog dismissed
			function alertDismissed() {
				// do something
			}
		
			// Show a custom alert
			function showAlert() {
				alert("derp");
			}
			
			// get light status
			function getStatus() {
				var ajax = new XMLHttpRequest();
				ajax.open("GET", "http://green.millennium.berkeley.edu/light/SutardjaDaiHall/4/1/status", true);
				ajax.send();
				
				ajax.onreadystatechange = function () {
					alert(ajax.responseText);
				}
			}

		</script>
    </head>

    <body>
    	<div data-role="page" id="page">
            <div data-role="header">
                <h1>
                    Fiat Lux Mobile
                </h1>
            </div>
            <div data-role="content">	
                <ul data-role="listview">
                    <li>
                        <a href="#" onClick="showAlert();">Floor 4</a>
                    </li>
                    <li>
                        <a href="#" onClick="getStatus();">Floor 5</a>
                    </li>
                    <li>
                        <a href="#floor6">Floor 6</a>
                    </li>
                    <li>
                        <a href="#floor7">Floor 7</a>
                    </li>
                </ul>		
            </div>
            <div data-role="footer">
                <h4>
                    Choose Floor
                </h4>
            </div>
        </div>
        
        <div data-role="page" id="floor4">
            <div data-role="header">
                <h1>
                    Floor 4
                </h1>
            </div>
            <div data-role="content">
                <ul data-role="listview">
                    <li>
                        <a href="#" onClick="herp();">Zone 1</a>
                    </li>
                    <li>
                        <a href="#control">Zone 2</a>
                    </li>
                    <li>
                        <a href="#control">Zone 3</a>
                    </li>
                    <li>
                        <a href="#control">Zone 4</a>
                    </li>
                    <li>
                        <a href="#control">Zone 5</a>
                    </li>
            	</ul>
            </div>
            <div data-role="footer">
                <h4>
                    Choose Zone
                </h4>
            </div>
        </div>
        
        <div data-role="page" id="floor5">
            <div data-role="header">
                <h1>
                    Floor 5
                </h1>
            </div>
            <div data-role="content">
                <ul data-role="listview">
                	<li>
	                    This floor is not implemented yet.
                    </li>
                </ul>
            </div>
            <div data-role="footer">
                <h4>
                    Choose Zone
                </h4>
            </div>
        </div>
        
        <div data-role="page" id="floor6">
            <div data-role="header">
                <h1>
                    Floor 6
                </h1>
            </div>
            <div data-role="content">
                <ul data-role="listview">
                	<li>
	                    This floor is not implemented yet.
                    </li>
                </ul>
            </div>
            <div data-role="footer">
                <h4>
                    Choose Zone
                </h4>
            </div>
        </div>
        
        <div data-role="page" id="floor7">
            <div data-role="header">
                <h1>
                    Floor 7
                </h1>
            </div>
            <div data-role="content">
            	<ul data-role="listview">
                    <li>
                        <a href="#control">Zone 1</a>
                    </li>
                    <li>
                        <a href="#control">Zone 2</a>
                    </li>
                    <li>
                        <a href="#control">Zone 3</a>
                    </li>
                    <li>
                        <a href="#control">Zone 4</a>
                    </li>
				</ul>
            </div>
            <div data-role="footer">
                <h4>
                    Choose Zone
                </h4>
            </div>
        </div>
        
        <div data-role="page" id="control">
        	<div data-role="header">
                <h1>
					Control Panel
                </h1>
            </div>
            <div data-role="content">
            	<ul data-role="listview">
                	<li>
                    	<a href="#">Time Remaining: <span id="timer">30</span></a>
                    </li>
                    <li>
                    	<a href="#">Current Brightness Setting: <span id="brightness">High</span></a>
                    </li>
                </ul>
            </div>
            <div data-role="footer">
                <h4>
                    Set your preferences!
                </h4>
            </div>
        </div>
    </body>
</html>
